<template>
  <Row>
    <div>
      <List header="props / emit" border>
        <ListItem>父组件通过 props 的方式向子组件传递数据，而子组件可以通过 emit( 'method' , ...param ) 向父组件通信</ListItem>
        <ListItem>总结: props 只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且 props 只读，不可被修改，所有修改都会失效并警告</ListItem>
      </List>
    </div>
    <div style="margin-top:24px">
      <Row class="row">
        <iInput v-model="value" placeholder="我是父组件的值" style="width: 300px" />
      </Row>
      <Row class="row">
        <children :value="value" @pushToParent="pushToParent"></children>
      </Row>
    </div>
  </Row>
</template>
 
<script>
import children from "./children";
export default {
  components: { children },
  data() {
    return {
      value: ""
    };
  },
  methods: {
    pushToParent(val) {
      this.value = val;
    }
  },
  created() {}
};
</script>
<style scoped>
.row {
  margin: 8px;
}
</style>